<template>
    <div style="height:100%;width:100%;">
        <div class="lineCanvas" style="height:250px; width:100%;"></div>
    </div>
</template>

<script>
export default {
    name: "businessIncome",
    data() {
        return {
            number: 10,
            incomeMainData: {
                lastYearLjIncomeList: {},
                thisYearBudgetList: {},
                gapOfBudgetLjList: {},
                thisYearLjIncomeList: {}
            },
            max: "",
            lastYearLjMin: "",
            thisYearBudgetMin: "",
            gapOfBudgetMin: "",
            thisYearLjMin: ""
        };
    },
    props: {
        incomeMain: {
            type: Object,
            default: () => {
                return {};
            }
        },
        time: {
            type: String,
            default: ""
        }
    },
    watch: {
        incomeMain(val) {
            this.incomeMainData = val;
            let obj = {
                xAxis: [],
                yAxis: []
            };
            let obj1 = {
                xAxis: [],
                yAxis: []
            };
            let obj2 = {
                xAxis: [],
                yAxis: []
            };
            let obj3 = {
                xAxis: [],
                yAxis: []
            };
            this.incomeMainData.lastYearLjIncomeList.map((item, index) => {
                obj.xAxis.push(item.month);
                obj.yAxis.push(item.lastYearLjIncome);
                this.lastYearLjMin = Math.min.apply(null, obj.yAxis);
            });
            this.incomeMainData.thisYearBudgetList.map((item, index) => {
                obj1.xAxis.push(item.month);
                obj1.yAxis.push(item.thisYearBudget);
                this.thisYearBudgetMin = Math.min.apply(null, obj1.yAxis);
            });
            this.incomeMainData.gapOfBudgetLjList.map((item, index) => {
                obj2.xAxis.push(item.month);
                obj2.yAxis.push(item.gapOfBudgetLj);
                this.max = Math.max.apply(null, obj2.yAxis);
            });
            this.incomeMainData.thisYearLjIncomeList.map((item, index) => {
                obj3.xAxis.push(item.month);
                obj3.yAxis.push(item.thisYearLjIncome);
                this.thisYearLjMin = Math.min.apply(null, obj3.yAxis);
            });
            var min = [
                this.lastYearLjMin,
                this.thisYearBudgetMin,
                this.thisYearLjMin
            ].sort(function(a, b) {
                return a - b;
            })[0];
            this.incomeMainData.lastYearLjIncomeList = obj;
            this.incomeMainData.thisYearBudgetList = obj1;
            this.incomeMainData.gapOfBudgetLjList = obj2;
            this.incomeMainData.thisYearLjIncomeList = obj3;
            this.getPie(this.incomeMainData, min, this.max, this.time);
        }
    },
    methods: {
        getPie(val, min, max, year) {
            const that = this;
            var myChart = this.$echarts.init(
                document.querySelector(".lineCanvas")
            );
            var lasrYear = +year - 1;
            // debugger
            var _max = Math.max.apply(null, val.gapOfBudgetLjList.yAxis);
            var _min = Math.min.apply(null, val.gapOfBudgetLjList.yAxis);
            var bigger = _max;
            if (Math.abs(_max) > Math.abs(_min)) {
                    bigger = _max;
            }
            if(Math.abs(_max) < Math.abs(_min)) {
                    bigger = _min;
            } 
            let option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow"
                    }
                },
                legend: [
                    {
                        data: [
                            "月累计预算盈缺(万元)",
                            lasrYear + "年完成(亿元)",
                        ],
                        bottom: "20px"
                    },
                    {
                        data: [year + "年完成(亿元)", year + "年预算(亿元)"],
                        // y: "bottom",
                        bottom: "0"
                    }
                ],
                grid: {
                    left: "20px",
                    // right: "20px",
                    bottom:'80px',
                    top: "20px"
                },
                xAxis: {
                    type: "category",
                    // boundaryGap: false,
                    // data: val.lastYearLjIncomeList.xAxis,
                    data: [
                        "1月",
                        "2月",
                        "3月",
                        "4月",
                        "5月",
                        "6月",
                        "7月",
                        "8月",
                        "9月",
                        "10月",
                        "11月",
                        "12月"
                    ],
                    axisLabel: {
                        interval: 0
                        // rotate:40 ,
                    }
                },
                yAxis: [
                    {
                        type: "value",
                        min: 0,
                        splitLine: { show: false }, //去除网格线
                        max: bigger,
                        min: 0,
                        // // interval: 50,
                        axisLabel: {
                            formatter: "{value}万元",
                            show: false
                        },
                        axisTick: {
                            //y轴刻度线
                            show: false
                        },
                        axisLine: {
                            //y轴
                            show: false
                        }
                    },
                    {
                        type: "value",
                        // min: min*2,
                        // max: min*2,
                        // // interval: 50,
                        splitLine: { show: false }, //去除网格线
                        axisLabel: {
                            formatter: "{value}亿元",
                            show: false
                        },
                        splitArea: {
                            show: true,
                            areaStyle: {
                                color: "#fff"
                            }
                        },
                        axisTick: {
                            //y轴刻度线
                            show: false
                        },
                        axisLine: {
                            //y轴
                            show: false
                        }
                    }
                ],

                series: [
                    {
                        type: "bar",
                        name: "月累计预算盈缺(万元)",
                        data: val.gapOfBudgetLjList.yAxis,
                        barWidth: 20,
                        itemStyle: {
                            normal: {
                                color: "rgb(85, 133, 191)",
                                label: {
                                    show: true,
                                    position: "top",
                                    textStyle: {
                                        color: "rgb(85, 133, 191)"
                                    }
                                }
                            }
                        }
                    },
                    {
                        type: "line",
                        name: lasrYear + "年完成(亿元)",
                        smooth: true,
                        yAxisIndex: 1,
                        data: val.lastYearLjIncomeList.yAxis,
                        lineStyle: {
                            normal: {
                                color: "#00b050", // 线条颜色
                                width: 0.8
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: "#00b050",
                                label: {
                                    show: true,
                                    position: "top",
                                    textStyle: {
                                        color: "#00b050"
                                    }
                                }
                            }
                        }
                    },
                    {
                        type: "line",
                        smooth: true,
                        name: year + "年完成(亿元)",
                        yAxisIndex: 1,
                        data: val.thisYearLjIncomeList.yAxis,
                        lineStyle: {
                            normal: {
                                color: "#ff0000", // 线条颜色
                                width: 0.8
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: "#ff0000",
                                label: {
                                    show: true,
                                    position: "top",
                                    textStyle: {
                                        color: "#ff0000"
                                    }
                                }
                            }
                        }
                    },
                    {
                        type: "line",
                        name: year + "年预算(亿元)",
                        yAxisIndex: 1,
                        smooth: true,
                        data: val.thisYearBudgetList.yAxis,
                        itemStyle: {
                            normal: {
                                color: "#a6a6a6", // 线条颜色
                                lineStyle: {
                                    width: 0.8,
                                    type: "dotted", //'dotted'虚线 'solid'实线
                                    color: "#a6a6a6" // 线条颜色
                                },
                                label: {
                                    show: true,
                                    position: "bottom",
                                    textStyle: {
                                        color: "#a6a6a6"
                                    }
                                }
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }
    }
};
</script>

<style></style>
